import React, { FC, useEffect } from 'react'
import { Form, Input, InputNumber } from 'antd'
import { QuestionRatePropsType } from './interface'

const PropComponent: FC<QuestionRatePropsType> = (props: QuestionRatePropsType) => {
  const { title, onChange, rateCount, defaultValue, rateValue } = { ...props }

  const [form] = Form.useForm()
  useEffect(() => {
    form.setFieldsValue({ title, rateCount, defaultValue, rateValue })
  }, [title, rateCount, defaultValue, rateValue])

  function handleValuesChange() {
    if (onChange == null) return
    const newValues = form.getFieldsValue() as QuestionRatePropsType
    onChange(newValues)
    console.log('newValues', newValues)
  }
  return (
    <Form
      layout="vertical"
      onValuesChange={handleValuesChange}
      initialValues={{ title, rateCount, defaultValue, rateValue }}
      form={form}
    >
      <Form.Item label="标题" name="title" rules={[{ required: true, message: '请输入标题' }]}>
        <Input></Input>
      </Form.Item>
      <Form.Item label="star总数" name="rateCount">
        <InputNumber min={1} max={8} defaultValue={3} />
      </Form.Item>
      <Form.Item label="默认star数目" name="rateValue">
        <InputNumber min={1} max={rateCount} defaultValue={3} />
      </Form.Item>
    </Form>
  )
}
export default PropComponent
